.duty-date{
  min-height: 40px;
  border: 1px solid #6A6A6A;
  h4{
    display: flex;
    padding-left: 0.5rem;
    height: 2rem;
    align-items: center;
    border: 1px solid #636363;
  }
  >div{
    padding-left: 1.5rem;
    display: flex;
    height: 3rem;
    align-items: center;
    background-color: #555;
    >.month{
      display: flex;
      align-items: center;
      margin-right: auto;
      label{
        padding-right: 1rem;
      }
      input{
        padding:0.3rem 0.3rem;
      }
    }
    >.btn{
      padding-right: 1.5rem;
      @mixin setbutton($backgroundcolor:#333){
        background-color:$backgroundcolor ;
        &:hover{
          background-color: darken($backgroundcolor,10%);
        }
        &:active{
          background-color: lighten($backgroundcolor,20%);
        }
      }
      button{
        &:first-child{
          margin-right: 1.5rem;
          @include setbutton(#FA2A43);
        }
        &.export{
          margin-right: 1.5rem;
          @include setbutton;
        }
        &.submit{
         @include setbutton(#FA2A43);
        }
      }
    }
  }
}
.weekday{
  display: flex;
  border: 1px solid #424242;
  margin:1rem 0;
  >div{
    border-right: 1px solid #424242;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 2rem;
    width:percentage(1/6);
  }
}
.monthDate{
  display: flex;
  flex-flow: row wrap;
  border-right: 1px solid #505050;
  border-bottom: 1px solid #505050;
  .date{
    border-top: 1px solid #505050;
    border-left:1px solid #505050;
    width: percentage(1/7);
    >p{
      border-bottom: 1px solid #505050;
      height: 2rem;
      display: flex;
      align-items: center;
      justify-content: center;
      b{
        font-weight: bold;
        font-size: 16px;
      }
      >i{
        font-size: 24px;
        line-height: 24px;
        cursor: pointer;
        &:hover{
          transform: scale(1.2);
        }
      }
    }
    >.content{
      min-height: 150px;
      .allday{
        min-height: 100px;
        .alldaytitle{
          color: #E90808;
          height: 24px;
          text-align: center;
          line-height: 24px;
          border-bottom:1px solid #505050;
        }
        .usertype{
          display: flex;
          min-height: 100px;
          border-bottom:1px solid #505050;
          .section{
            border-right: none;
            .leader-title{
              border-right: none;
              border-bottom: 1px solid #505050;
            }
          }
          >div{
            width: percentage(1/3);
            text-align: center;
            border-right: 1px solid #505050;
            .leader-title{
              border-bottom: 1px solid #505050;
            }
          }
        }
      }
      .amandpm{
        display: flex;
        >div{
          width: 50%;
        }
        .am{
          border-right : 1px solid #505050;
          .am-title{
            border-bottom:1px solid #505050;
            height: 24px;
            line-height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
          }
          .am-content{
              min-height: 100px;
              >div{
                display: block;
                flex-direction: column;
                align-items: center;
              }
          }
        }
        .pm{
          .pm-title{
            height: 24px;
            line-height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-bottom:1px solid #505050;
          }
          .pm-content{
            min-height: 100px;
            >div{
              display: block;
              flex-direction: column;
              align-items: center;
            }
          }
        }
      }
    }
  }
}
